<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取对象--选择器</title>
    <script src="js/jquery.min.js"></script>
    <script>

        $(function (){
            //获取body中的div元素
            //此时$div 就是jQuery对象---->div元素
            var $div01 = $("#div01");
            // $div01.style.height="100px";
            // $div01.style.width="100px";
            // $div01.style.background="red";
            // $div01.css({"height":"100px","width":"100px","background":"red"})
            $div01.css({height: "100px",width: "100px",background: "red"})
            var $a1 = $(".a1");
            $a1.css({height: "200px",width: "200px",background: "green"})

            //JQ对象和JS对象之间转换
            //把js对象转换为JQ对象  ---->$(js对象)---->jq对象
            var p1 = document.getElementById("p1");
            p1.innerText="我是一个p标签";
            $(p1).text("我也是第一个p标签")
// var $p1 = $("#p1");$p1.text("wangyunfei")

            $(".p2").text("我是第二个p标签")

        })
    </script>

</head>
<body>
<div id="p1"></div>
<div class="p2"></div>
<div id="div01"></div>
<div class="a1"></div>
<form action="#">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
</body>
</html>